import React from 'react';
import Block from 'fs-flex'
import styles from './index.less';
export default class Select extends React.Component{
  state={
    value: '',
    defaultValue:'',
  }
  async componentDidMount(){
    setTimeout(() => {
      this.props.change(this.props.defaultSelect)
    }, 1000);
  }
  selectChange=(e)=>{
    const {change}=this.props
    this.setState({value:e.target.value})
    change(e.target.value)
  }

  // 父组件传递的props改变时候执行
  componentWillReceiveProps(nextProps){
    this.setState({
      defaultValue:nextProps.defaultSelect,
    })
  }
  render(){
    let {defaultValue,value}=this.state
    const {data,placeholder,height}=this.props
    const lineStyle={
      height:height,
      lineHeight:height
    }

    if(!value){
      if(defaultValue){
        value=defaultValue
      }
    }

    return(
      <Block className={styles.selectBox} style={[height?{lineStyle}:null]}>
        <select className={styles.selectCompoent} style={[height?{lineStyle}:null]} onChange={this.selectChange} value={value}>
          <option value=''>{placeholder?placeholder:'请选择'}</option>
          {
            data && data.length>0?data.map((item,i)=>{
              return <option key={'todo-item'+i} value={item.id}>{item.sysValue}</option>
            }):null
          }
        </select>
      </Block>
    )
  }
}
